<template>
  <div>
    <el-image
      class="thumbnail"
      fit="cover"
      lazy
      :style="{ width: '140px', height: `${imgHeiht}px` }"
      type="mime-type"
      :src="imgUrl"
      :preview-src-list="[imgUrl]"
      @error="reLoadImg"
    >
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
      <div slot="error" class="image-slot">文件已过期</div>
    </el-image>
    <el-dialog
      :visible.sync="visible"
      :before-close="handleClose"
      :width="imgDialogWidth"
    >
      <div class="dialog-img">
        <img :src="imgUrl" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Jindouyun from '../../../../utils/jindouyun'
const _jindouyun = new Jindouyun({
  userId: '1111435842045702146',
  header: {},
  token: ''
})
export default {
  props: ['info', 'id'],
  computed: {
    imgHeiht: function () {
      const { width, height } = this.info
      return 140 * height / width || 0
    },
    // imgUrl: function () {
    //   if (this.info.tempImg) { return this.info.tempImg }
    //   return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId + '' })
    // },
    // thumbUrl: function () {
    //   if (this.info.tempImg) { return this.info.tempImg }
    //   if (this.info.fileName.includes('.gif')) {
    //     return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId + '' })
    //   }
    //   return _jindouyun.downloadCustomFile({ isPublic: false, fileId: this.info.sourceId + '', quality: 0.3 })
    // },
    imgDialogWidth: function () {
      let width
      if (this.info.width > 600) {
        width = 600 * 1
      } else if (this.info.width < 300) {
        width = 300
      } else {
        width = this.info.width * 1
      }
      return width + 45 + 'px'
    }
  },

  created () {
    this.imgUrl = this.info.tempImg || _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId + '' })
  },
  data () {
    return {
      visible: false,
      imgUrl: require('@/assets/picture/loading.gif'),
      hasReLoadImg: false
    }
  },
  methods: {
    handleClose () {
      this.visible = false
    },
    reLoadImg () {
      if (!this.hasReLoadImg) {
        setTimeout(() => {
          this.imgUrl += '#123'
          this.hasReLoadImg = true
        }, 600)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-img {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 600px;
  }
}
.image-slot {
  background: #f5f7fa;
  color: #c0c4cc;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumbnail {
  max-width: 140px;
  max-height: 180px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid #dddddd;
}
</style>
